Html এর মাধ্যমে বর্ণনামূলক লিস্ট তৈরি করার নিয়ম

Welcome to Creationbangla-24. কেমন আছেন বন্ধুরা? আশা করি মহান আল্লাহ্ তা'য়ালার অশেষ রহমতে ভালো আছেন। আপনারা অবশ্যই Title দেখে বুঝতে পেরেছেন এই পেজে কী বিষয় নিয়ে আলোচনা করতে যাচ্ছি। তো আপনাদের জানিয়ে রাখি এটি একটি শিক্ষা বিষয়ক সাইট। এই site এ আমি নির্দিষ্ট কিছু বিষয় নিয়ে ধারাবাহিক ভাবে লিখব। আপনাদের একটি কথা না বললেই নয় যে, এই Page টি ভালোভাবে বুঝার জন্য এবং Page টি থেকে উপকৃত হওয়ার জন্য সম্পূর্ণ Page টি মনযোগ সহকারে পড়বেন। এখন এই পেজটিতে আপনাদের সাথে আলোচনা করতে যাচ্ছি "<dd> ট্যাগ" সম্পর্কে এবং আপনাদের সাথে আছি আমি Md.Aiub তো চলুন বন্ধুরা শুরু করা যাক।


descriptional list
ওয়েবপেজে বর্ণনামূলক লিস্ট তৈরি করার জন্য <dd> <dl> <dt> ব্যবহার করা হয়। <dd> ট্যাগের কাজ হলো বর্ণনামূলক লিস্টের Item গুলো ব্যাখ্যা করা। <dl> ট্যাগের কাজ হলো বর্ণনামূলক লিস্টের Item গুলোকে একত্রে ধারণ করা। <dt> ট্যাগের কাজ হলো বর্ণনামূলক লিস্টের নাম ধারণ করা।

<dd> <dl> <dt> ট্যাগ এর গঠনরীতি: <dd> <dl> <dt> ট্যাগ এর গঠনরীতি হলো <dd>...Given your text...</dd>
উপরের তিনটি ট্যাগের গঠনরীতি একই। তাছাড়া <dd> <dl> <dt> ট্যাগে Global Attributes ও Event Attributes support করে।

নিম্নে বর্ণনামূলক লিস্ট তৈরি করার জন্য কোডিং করে দেখানো হলো। আপনি চাইলে কোড বা টেক্স পরিবর্তন করে এখানেই অনুশীলন করতে পারেন এবং Run Code Button এ ক্লিক করে উপরের কোডগুলোর Output দেখতে পারেন । আবার আপনি চাইলে Copy Code Button এ ক্লিক করে কোডগুলো কপি করতে পারেন এবং তা আপনার প্রয়োজনে ব্যাবহার করতে পারেন।





Output
উপরিউক্ত Tag বিশ্লেষণ ও কাজের বর্ণনা :
  1. <!doctype html> এটাকে আসলে সম্পূর্ণ কোন Tag বলা হয় না। <!doctype html> ট্যাগ ব্যবহার করা হয় <html> ট্যাগ এর পূর্বে। যা ওয়েব ব্রাউজার কে html এর ভার্সন বলে দেয়। যাতে ওয়েব ব্রাউজার ওয়েব কন্টেন্ট গুলোর সাথে ভালো ভাবে কাজ করতে পারে। আর <!doctype html> ট্যাগ এর প্রধান কাজ হচ্ছে ওয়েব ব্রাউজার কে বলে দেওয়া যে, ওয়েব পেজটির Document type. HTML5 Standard.
  2. <html> ট্যাগ দ্বারা ওয়েব ব্রাউজারকে নির্দেশ করা হয়েছে যে, এই ওয়েব পেজটি HTML ভাষায় তৈরী।
  3. <head> ট্যাগ ওয়েবপেজ সম্পর্কিত তথ্য ধারণ করে। এখানে ওয়েবপেজের শিরোনাম রাখা হয়েছে <head> ট্যাগ এর মাঝে। তাছাড়াও <head> ট্যাগ এর মাঝেই আপনাকে Style sheet, Script, meta ট্যাগ ব্যবহার করতে হবে।
  4. <title> ট্যাগ ওয়েবপেজের শিরোনাম ধারণ করে। <title> ট্যাগ এর মাধ্যমে ওয়েবপেজের শিরোনাম শুরু করা হয়েছে এবং সম্পূর্ণ শিরোনামটি এই ট্যাগ এর মধ্যেই রাখতে হবে।
  5. </title> ট্যাগ এর মাধ্যমে ওয়েবপেজের শিরোনাম শেষ করা হয়েছে। অর্থাৎ <title> ট্যাগ বন্ধ করা হয়েছে। এই ট্যাগ এর বাইরে কিছু লিখলে সেটা ওয়েবপেজের শিরোনাম বলে গণ্য হবে না।
  6. </head> ট্যাগ এর মাধ্যমে <head> বন্ধ করা হয়েছে।
  7. <body> ট্যাগ ওয়েবপজের মূল উপাদান ধারণ করে। আপনি ওয়েবপেজে যা প্রদর্শন করাতে চান সেই সম্পর্কিত সকল ট্যাগ <body> ট্যাগ এর মধ্যে রাখতে হবে।
  8. <h1> Tag দ্বারা ওয়েব পেজে আলোচিত বিষয়ের শিরোনাম নির্ধারণ করা হয়েছে।
  9. </h1> ট্যাগ এর মাধ্যমে ওয়েবপেজে আলোচিত বিষয়ের শিরোনাম শেষ করা হয়েছে। অর্থাৎ <h1> ট্যাগ বন্ধ করা হয়েছে। এই ট্যাগ এর বাইরে কিছু লিখলে সেটা ওয়েব পেজে আলোচিত বিষয়ের শিরোনাম বলে গণ্য হবে না।
  10. <dl> Tag ওয়েবপেজে একটি বর্ণনামূলক লিস্টের Item ধারণ করে।
  11. <dt> Tag ওয়েবপেজে একটি বর্ণনামূলক লিস্টের নাম ধারণ করে।
  12. </dt> Tag এর মাধ্যমে <dt> ট্যাগ বন্ধ করা হয়েছে।
  13. <dd> Tag ওয়েবপেজে একটি বর্ণনামূলক লিস্টের Item ব্যাখ্যা করে।
  14. </dd> Tag এর মাধ্যমে <dd> ট্যাগ বন্ধ করা হয়েছে।
  15. </dl> Tag এর মাধ্যমে <dl> ট্যাগ বন্ধ করা হয়েছে।
  16. </body> Tag এর মাধ্যমে <body> ট্যাগ বন্ধ করা হয়েছে।
  17. </html> Tag Tag এর মাধ্যমে <html> ট্যাগ বন্ধ করা হয়েছে। অর্থাৎ Html ভাষায় তৈরিকৃত ওয়েজপেজটি শেষ করা হয়েছে। এই ট্যাগ এর বাইরে কিছু লিখলে তা Html ভাষায় তৈরিকৃত ওয়েজপেজটির কোনো Document বলে বিবেচিত হবে না।

ًপ্রিয় পাঠক বন্ধুরা,
আপনারা যদি এই পেজটি পড়ে উপকৃত হন তাহলে আমার পরিশ্রম স্বার্থক হবে। উপকৃত হয়ে থাকলে এই পেজটি আপনার বন্ধুদের মাঝে শেয়ার করতে ভুলবেন না। আপনার মতামত প্রকাশ করতে চাইলে কমেন্ট বক্সে কমেন্ট করতে পারেন। এতোক্ষণ ধর্য্যসহকারে Page টি পড়ার জন্য এবং আপনার মূল্যবান সময় আমাদের সাথে ব্যয় করার জন্য ধন্যবাদ। এর পরের Page এ আপনাদের সাথে "<del>" নিয়ে আলোচনা করবো, সেই সময় পর্যন্ত আমদের সাথে থাকার আমন্ত্রণ রইল। আপনাদের সকলে সুস্বাস্থ্য ও দীর্ঘায়ু কামনা করে আজকের মতো শেষ করছি,
আল্লাহ হফেজ...


Post a Comment

Previous Post Next Post